<template>
	<view>
		<view style="margin: 24.77rpx ">
			<image :src="img_list" mode="" style="width: 694.6rpx;height: 143rpx;"></image>
		</view>
		<view style="width: 750rpx;min-height: 294.75rpx;background: #FFFFFF;box-sizing: border-box;padding: 36.24rpx;">
			<view style="font-size: 26.58rpx;color: #1C202C;letter-spacing: 2rpx;margin-bottom: 28rpx;font-weight: bold;">选择机构类型</view>
			<view style="display: flex;justify-content: space-between;">
				<view v-for="(itme,index) in leixing" :key="index" style="width: 155.23rpx;height: 163.67rpx;line-height: 163.67rpx;text-align: center;font-size: 30.2rpx;border-radius: 12.08rpx;" @tap="add(index,itme)" :class="indexl == index?'clc':'yuan'" >{{itme}}</view>
			</view>
		</view>
		<view style="height: 123.81rpx;width: 750rpx;padding: 41rpx 70rpx;display: flex;justify-content: space-between;box-sizing: border-box;background: #F2F2F2;align-items: center;">
			<view v-for="(itme,index) in arr_bu" :key="index" style="display: flex;height: 25.55rpx;align-items: center;">
				<view style="font-size: 25.55rpx;height: 41.31rpx;width: 41.31rpx;line-height: 41.31rpx;text-align: center;margin-right: 17rpx;border-radius:50% ;" :class="num == index?'bian':'bian_'">{{itme.shuju}}</view>
				<view style="font-size: 25.55rpx;">{{itme.zifu}}</view>
				<image :src="itme.img" style="width: 15.71rpx;height: 16.9rpx; vertical-align: middle;margin-left:22.744rpx ;"></image>
			</view>
		</view>
		<view style="width: 700.64rpx;min-height: 438.5rpx;background: #FFFFFF;margin-left:24.77rpx ;border-radius: 18.12rpx;box-sizing: border-box;padding: 30.3rpx 30rpx 45rpx 30rpx;">
			<view style="display: flex;flex-wrap: nowrap;">
				<view style="font-size: 26.58rpx;color: #383838;font-weight: bold;">机构标志</view>
				<view style="font-size: 25.368rpx;color: #D6D6D6;margin-left: 322rpx;" @tap="addl('logo')">上传机构logo</view>
				<image style="width: 38.65rpx;height: 32.616rpx;margin-left: 18rpx;vertical-align: middle;" :src="img_lo" ></image>
			</view>
			<view v-if="img_lo != 'http://img.curiousmore.com/57037535325'" class="img_tou" style="margin-top: 20rpx;">
				<image :src="img_lo" class="img_tou" @tap="previewImage(1)"></image>
				<image :src="shanchu_icon" class="shanchu_icon" @tap.stop="delet_img(1)"></image>
			</view>
			<view style="height: 2rpx;width: 100%;background: #E0E0E0;margin: 39rpx 0;"></view>
			<view class="imp">
				<view style="font-size: 26.58rpx;color: #383838;font-weight: bold;">机构门面照片</view>
				<view style="font-size: 25.368rpx;color: #D6D6D6;margin-left: 225.62rpx;" @tap="addl('menmian')">上传机构门面照片</view>
				<image style="width: 38.65rpx;height: 32.616rpx;margin-left:18rpx;" :src="img_men"></image>
			</view>
			<view v-if="img_men != 'http://img.curiousmore.com/57037535325'" class="img_tou" style="margin-top: 20rpx;">
				<image :src="img_men" class="img_tou" @tap="previewImage(2)"></image>
				<image :src="shanchu_icon" class="shanchu_icon" @tap.stop="delet_img(2)"></image>
			</view>
			<view style="height: 2rpx;width: 100%;background:#E0E0E0;margin: 39rpx 0;"></view>
			<view class="imp" style="justify-content: space-between;display: flex;height: 26.58rpx;">
				<view style="font-size: 26.58rpx;color: #383838;font-weight: bold;;">机构名称</view>
				<view >
					<input v-model="inpu"  placeholder="请输入机构名称" style="height: 20.36rpx;font-size: 25.36rpx;padding: 0;margin: 0;" type="text"/>
				</view>
			</view>
			<view style="height: 2rpx;width: 100%;background: #E0E0E0;margin: 39rpx 0;" ></view>
			<view class="imp" style="display: flex;justify-content: space-between;height: 26.58rpx;" @tap="fofo">
				<view style="font-size: 26.58rpx;color: #383838;font-weight: bold;height: 26.58rpx;" >所在位置</view>
				<input v-model="list"  placeholder="机构所在地址" style="height: 20.36rpx;font-size: 25.36rpx;padding: 0;margin: 0;" disabled/>
				<image style="width: 24.77rpx;height: 29.6rpx;" :src="addre" ></image>
			</view>
		</view>
		<view style="width: 700.64rpx;height: 96rpx;background: #FFFFFF;margin-left:24.77rpx ;border-radius: 18.12rpx;box-sizing: border-box;padding: 30.3rpx 30rpx 45rpx 30rpx;margin-top: 18rpx;display: flex;align-items: center;justify-content: space-between;">
			<view style="font-size: 26.58rpx;color: #383838;font-weight: bold;height: 96rpx;line-height: 96rpx;">开通教付保</view>
			<view style="display: flex;align-items: center;height:96rpx ;line-height: 96rpx;">
				<text style="font-size: 24.15rpx;color:#FF7300 ;">了解教付保</text>
			</view>
			<view style="display: flex;align-items: center;height:96rpx ;">
				<switch checked @change="switch1Change" color="#FF7300" style="transform: scale(0.7,0.7)" />
			</view>
		</view>
		<view style="font-size: 21.74rpx;color: #BBBBBB;margin-top: 33.21rpx;padding-left:55rpx ;letter-spacing: 2rpx;">
			<view style="margin-bottom: 9rpx;">信息安全声明</view>
			<view>所填信息仅用于门店入驻审核，请放心填写</view>
		</view>
		<view style="width: 648.7rpx;height: 85.76rpx;background: #FF7300;color: #FFFFFF;text-align: center;line-height:  85.76rpx;font-size: 29rpx;margin:38rpx 0 41.1rpx 50.73rpx;border-radius: 42.9rpx;" @tap="go">
			下一步
		</view>
	</view>
</template>
<script>
	import qiniu from "../../../common/qiniuUploader.js"
	export default {
		data() {
			return {
				num_: 1,
				num: 0,
				img: "",
				token: "",
				imgList: [],
				user_id: {},
				key: "",
				url: "",
				leixing: ["艺术","体育","学科","其它"],
				indexl: -1,
				arr_bu: [
					{
						shuju:"01",
						zifu:"添加门店",
						
					},
					{
						shuju:"02",
						zifu:"完善资料",
						
					},
					{
						shuju:"03",
						zifu:"资质认证",
						img:""
					}
				],
				img_lo: "http://img.curiousmore.com/57037535325",
				img_men: "http://img.curiousmore.com/57037535325",
				inpu: "",
				addre: "http://img.curiousmore.com/690022",
				tempFilePaths: [],
				list: "",
				list_lei: "",
				jiaofu_bao: true,
				jingdu: "",
				weidu: "",
				img_list: "http://img.curiousmore.com/13711915390",
				shanchu_icon: "http://img.curiousmore.com/566544"
			}
		},
		methods:{
			
			delet_img(index) {
				if(index == 1){
					this.img_lo = "http://img.curiousmore.com/57037535325"
				}else {
					this.img_men = "http://img.curiousmore.com/57037535325"
				}
				
			},
			
			previewImage(index) {
				let a = []
				if(index == 1){
					a.push(this.img_lo)
				}else {
					a.push(this.img_men)
				}
				uni.previewImage({
					urls: a
				})
			},
			switch1Change(res) {
				this.jiaofu_bao = res.target.value
			},
			
			go(){
				let me = this
				uni.getLocation({
				    type: 'wgs84',
				    success: function (res) {
						if(me.list_lei != "" && me.inpu != "" && me.list != "" && me.img_lo != "http://img.curiousmore.com/57037535325" && me.img_men != "http://img.curiousmore.com/57037535325"){
							let data = {
								leixing: me.list_lei,
								img_mian: me.img_men,
								img_logo: me.img_lo,
								jigou_name: me.inpu,
								jigou_adderr: me.list,
								jiaofu_xuan: me.jiaofu_bao,
								jingdu: res.longitude,
								weidu: res.latitude
							}
							uni.navigateTo({
								url:"/pages/World/publishCurious/publishCurious?num=" + encodeURIComponent(JSON.stringify(data)) 
							})
						}else{
							uni.showToast({
							    title: '填写完整信息',
							    duration: 2000,
								icon:"none"
							});
						}
				    }
				})
			},
			aver(type){
				if(type == "wei"){
					this.num_ = 2
					this.jiaofu_bao = true
				}else{
					this.num_ =1
					this.jiaofu_bao = false
				}
			},
			
			fofo(){
				let me = this
				uni.chooseLocation({
				    success: function (res) {
						 me.list = res.address
				    },
					fail:(res) => {
						console.log(res)
					}
				});
			},
			add(index,itme){
				this.indexl = index
				this.list_lei = itme
			},
			to(){
				this.key = Math.ceil(Math.random()*1000000)
				uni.request({
					url:"https://curiousmore.com/qmore/push/upload/getToken",
					data:{
						key:this.key
					},
					method:"post",
					success:(res) => {
						this.token = res.data.data
					}
				})
			},
			addl(type){
				let me = this
				uni.showActionSheet({
				  itemList: ['从手机相册选择', '拍照'],
				  success: function(res) {
					let aa = []
					if(res.tapIndex == 1){
						aa = ["camera"]
					}else{
						aa = ["album"]
					}
					me.to()
					uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: aa,
						success:(res_) => {
							let filePath = res_.tempFilePaths[0]
							if(me.token != ""){
								console.log(type)
								qiniu.upload(filePath, (res) => {
									if(type == "logo"){
										me.img_lo = res.fileUrl
									}else if(type == "menmian"){
										me.img_men = res.fileUrl
									}
								}, (error) => {
									console.log('error: ' + error);
								}, {
									region: 'ECN',
									domain: 'http://img.curiousmore.com', 
									key: me.key, 
									uptoken: me.token, 
								}, (res) => {
									console.log('上传进度', res.progress)
									console.log('已经上传的数据长度', res.totalBytesSent)
									console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
								}, () => {
									// 取消上传
								}, () => {
									// `before` 上传前执行的操作
								}, (err) => {
									// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
								});
							}
						}
					})
				  },
				fail: function(res) {
				    console.log(res.errMsg,"2222222222")
				  }
				})
			},
		},
		onLoad() {
			try{
			this.user_id =uni.getStorageSync('userif_list')
			}catch(e){}
		},
		onShow() {
			
		}
	}
</script>
<style lang="scss" scoped>
	.img_tou {
		width: 150rpx;
		height: 150rpx;
		vertical-align: middle;
		position: relative;
		border:  #E8E8E8 0.5rpx solid;
		border-radius: 10rpx;
		.shanchu_icon {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: -25rpx;
			left: 125rpx;
		}
	}
	.clc{
		color: #FFFFFF;
		background: #FF7300;
	}
	.yuan{
		background: #E8E8E8;
		color: #3C3C3C;
	}
	.bian{
		background: #FF7300;
		color: #FFFFFF;
	}
	.bian_{
		background: #E8E8E8;
		color: #C1C1C1;
	}
	.imp{
		display: flex;
		align-items: center;
	}
</style>
  